<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<title>计划列表</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-table-title {
				padding: 3px 0;
				font-size: 1.1em;
				width: 90%;
			}

			.mui-text-line {
				width: 82%;
				font-size: .7em;
				padding-left: 1%;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">计划列表</h1>
			<a class="mui-icon mui-icon-plusempty mui-pull-right" href="#addplan"></a>
		</header>
		<div class="mui-content mui-fullscreen" id="plans">
			<!--计划内容-->
			<div class="mui-card mui-plan-info">
				<div class="mui-card-header">计划</div>
				<div class="mui-card-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" v-for="interval in interval_list">
							<a class="mui-navigate-right" v-on:click="opendetail(interval.id)">
								<div class="mui-table-title mui-ellipsis">{{interval.planname}}<span :class="classObject(interval.isalive)">{{interval.isalivename}}</span></div>
								<span class="mui-badge mui-badge-inverted mui-right">{{interval.plantypename}}</span>
								<p class="mui-text-line mui-text-left mui-ellipsis">控制设备:{{interval.controlname}}</p>
								<p class="mui-text-line mui-text-left mui-ellipsis">控制条件:{{interval.contidionname}}</p>
							</a>
						</li>
						<li class="mui-table-view-cell" v-for="condition in condition_list">
							<a class="mui-navigate-right" v-on:click="opendetail(condition.id)">
								<div class="mui-table-title mui-ellipsis">{{condition.planname}}<span :class="classObject(condition.isalive)">{{condition.isalivename}}</span></div>
								<span class="mui-badge mui-badge-inverted mui-right">{{condition.plantypename}}</span>
								<p class="mui-text-line mui-text-left mui-ellipsis">控制设备:{{condition.controlname}}</p>
								<p class="mui-text-line mui-text-left mui-ellipsis">控制条件:{{condition.contidionname}}</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="addplan" class="mui-popover mui-popover-action mui-popover-bottom" style="display: none;">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a onclick="vm_plan.openUrl('plan_interval.html?powerid=')">时间计划</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a onclick="vm_plan.openUrl('plan_condition.html?powerid=')">条件计划</a>
				</li>
			</ul>
		</div>
		<script src="js/common.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/config.js"></script>
		<script>
			mui.init();
			var vm_plan = new Vue({
				el: "#plans",
				data: {
					powerid: "", // 权限编号
					uid: 0, // 用户编号
					interval_list: [], // 时间计划列表
					condition_list: [], // 条件计划列表
				},
				methods: {
					LoadData: function() { // 加载目录结构数据
						// 获取数据结构
						mui.get(setting.GetConfigData(vm_plan.uid),
							function(d) {
								if (d.code == "0") {
									setting.SetCacheConfig(d.result);
								}
							});
					},
					LoadPlanData: function() { // 加载计划配置机构数据
						if (vm_plan.uid == null || vm_plan.powerid == null) return;
						mui.get(setting.GetPlanConfig(vm_plan.uid, vm_plan.powerid),
							function(d) {
								if (d.code == "0" && d.result.data != null) {
									for (var i = 0; i < d.result.data.length; i++) {
										var p = vm_plan.copy(d.result.data[i]);
										var cname = [];
										var ctag = "";
										switch (p.plantype) {
											case "condition":
												ctag = [];
												for (var j = 0; j < p.conditionlist.length; j++) {
													if (!cname.contains(p.conditionlist[j].controlname))
														cname.push(p.conditionlist[j].controlname);
													if (!ctag.contains(p.conditionlist[j].targetname))
														ctag.push(p.conditionlist[j].targetname);
												}
												p.controlname = cname.join(',');
												p.contidionname = ctag.join(',');
												vm_plan.condition_list.push(p);
												break;
											case "interval":
												for (var j = 0; j < p.intervallist.length; j++) {
													if (!cname.contains(p.intervallist[j].controlname)) {
														cname.push(p.intervallist[j].controlname);
													}
													ctag = p.intervallist[j].starttime + " ~ " + p.intervallist[j].endtime;
												}
												p.controlname = cname.join(',');
												p.contidionname = ctag;
												vm_plan.interval_list.push(p);
												break;
										}
									}
									// 缓存计划列表
									setting.SetPlanDataConfig(d.result.data);
								}
							});
					},
					openUrl: function(url) {
						mui.openWindow({
							url: url + vm_plan.powerid
						});
					},
					opendetail: function(id) {
						mui.openWindow({
							url: "plan_detail.html?id=" + id
						});
					},
					copy: function(obj) {
						var newobj = {};
						for (var attr in obj) {
							newobj[attr] = obj[attr];
						}
						return newobj;
					},
					classObject: function(alive) {
						return alive == "active" ? "mui-badge mui-badge-green mui-pull-right" :
							"mui-badge mui-badge-gray mui-pull-right"

					}
				},
				mounted: function() {
					this.$nextTick(function() {
						// 提取用户编号uid,权限编号powerid，获取计划结构信息
						vm_plan.uid = GetQueryString(uid);; // GetQueryString(uid);
						vm_plan.powerid = GetQueryString("pid"); // GetQueryString("pid");'4b749cd28c5d41718510cd5fdcb80aef';
						vm_plan.LoadData();
						vm_plan.LoadPlanData();
					});
				}
			});
		</script>
	</body>
</html>
